<!-- 
	上拉加载
 -->
<template>
	<view class="tui-loadmore" v-if="visible">
		<view v-if="status === 'loading'" :class="['tui-loading-' + index, index == 3 && type ? 'tui-loading-' + type : '']"></view>
		<view class="tui-loadmore-tips">{{ statusTxtObj[status] }}</view>
	</view>
</template>

<script>
export default {
	name: 'tuiLoadmore',
	props: {
		status: {
			type: String,
			default: 'more'	//
		},
		//是否可见
		visible: {
			type: Boolean,
			default: true
		},
		//loading 样式 ：1,2,3
		index: {
			type: Number,
			default: 3
		},
		//颜色设置，只有index=3时生效：primary，red，orange，green
		type: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			statusTxtObj: {
				more: '上拉显示更多',
				loading: '正在加载...',
				noMore: '没有更多数据了'
			}
		}
	}
};
</script>

<style>
.tui-loadmore {
	width: 48%;
	padding: 1.5em 0;
	margin: auto;
	line-height: 1.5em;
	font-size: 24upx;
	text-align: center;
}

.tui-loading-1 {
	margin: 0 5px;
	width: 20px;
	height: 20px;
	display: inline-block;
	vertical-align: middle;
	-webkit-animation: a 1s steps(12) infinite;
	animation: a 1s steps(12) infinite;
	background: transparent
		url()
		no-repeat;
	background-size: 100%;
}

@-webkit-keyframes a {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(1turn);
		transform: rotate(1turn);
	}
}

@keyframes a {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(1turn);
		transform: rotate(1turn);
	}
}

.tui-loadmore-tips {
	display: inline-block;
	vertical-align: middle;
}

.tui-loading-2 {
	width: 28upx;
	height: 28upx;
	border: 1px solid #8f8d8e;
	border-radius: 50%;
	margin: 0 6px;
	display: inline-block;
	vertical-align: middle;
	clip-path: polygon(0% 0%, 100% 0%, 100% 30%, 0% 30%);
	animation: rotate 1s linear infinite;
}

@-webkit-keyframes rotate {
	from {
		transform: rotatez(0deg);
	}

	to {
		transform: rotatez(360deg);
	}
}

@keyframes rotate {
	from {
		transform: rotatez(0deg);
	}

	to {
		transform: rotatez(360deg);
	}
}

.tui-loading-3 {
	display: inline-block;
	margin: 0 6px;
	vertical-align: middle;
	width: 28upx;
	height: 28upx;
	background: 0 0;
	border-radius: 50%;
	border: 2px solid;
	border-color: #e5e5e5 #e5e5e5 #e5e5e5 #8f8d8e;
	animation: tui-rotate 0.7s linear infinite;
}

.tui-loading-3.tui-loading-primary {
	border-color: #e5e5e5 #e5e5e5 #e5e5e5 #5677fc;
}

.tui-loading-3.tui-loading-green {
	border-color: #e5e5e5 #e5e5e5 #e5e5e5 #19be6b;
}

.tui-loading-3.tui-loading-orange {
	border-color: #e5e5e5 #e5e5e5 #e5e5e5 #ff7900;
}

.tui-loading-3.tui-loading-red {
	border-color: #ededed #ededed #ededed #ed3f14;
}

@-webkit-keyframes tui-rotate {
	0% {
		transform: rotate(0);
	}

	100% {
		transform: rotate(360deg);
	}
}

@keyframes tui-rotate {
	0% {
		transform: rotate(0);
	}

	100% {
		transform: rotate(360deg);
	}
}
</style>
